<template>
  <div>
    <header>
      <van-search v-model="value" placeholder="请输入搜索关键词" show-action>
        <template #left>
          <van-icon name="wap-nav" class="iconleft" @click="handleCategory"/>
        </template>
        <template #action>
          <van-icon name="chat-o" class="iconright" />
        </template>
      </van-search>
    </header>
    <main>
      <!-- 分类 -->
      <div class="classify">
        <van-grid :column-num="5" :gutter="6" :border="false" square>
          <van-grid-item
            v-for="(item, index) in list"
            :key="index"
            @click="toSearch()"
          >
            <van-image :src="item.url" />
            <span>{{ item.name }}</span>
          </van-grid-item>
        </van-grid>
      </div>

      <!-- <div class="content"></div> -->
      <!-- 商品列表 -->
      <div class="list">
        <ul>
          <li v-for="(item, index) in goodslist" 
          :key="index"
          >
            <div class="list-li">
              <img :src="item.img" alt="" width="100%" style="borderRaduis: 16px" class="list-li-img"/>
              <div class="contbo">
                <div class="title">{{ item.title }}</div>
                <div class="content-space">
                  <span style="width: 46px;display:inline-block">￥{{ item.price }}</span>
                  <img src="https://s10.mogucdn.com/mlcdn/c45406/200928_043cgf54cjia5d88gfj5j626id541_66x36.png" class="button-icon" width="25px">
                  <span class="sale">销量：{{item.cfav}}</span>
                </div>
                <!-- 播放按钮 -->
                <img
                  src="https://s10.mogucdn.com/mlcdn/c45406/190717_0a48k9jegh3a0gg2gfgaf3j24bij0_84x84.png"
                  class="play-icon"
                />
              </div>
            </div>
      
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>
<script>
import axios from "axios";

import Vue from "vue";
import { PullRefresh } from "vant";

Vue.use(PullRefresh);
var list = [
  {
    id: "01",
    name: "女装",
    url: "https://s10.mogucdn.com/mlcdn/c45406/210218_2d5ha15814klee6i405dldc1l1fg2_150x150.png_640x640.v1cAC.40.webp",
  },
  {
    id: "02",
    name: "新人福利",
    url: "https://s10.mogucdn.com/mlcdn/c45406/210127_28lafia2el07d272h21h0dk09dcgb_150x150.webp_999x999.v1c0.100.jpg",
  },
  {
    id: "03",
    name: "上衣",
    url: "https://s10.mogucdn.com/mlcdn/c45406/210218_7llgl01h7l8la47ki60g90ij4ib1i_150x150.png_640x640.v1cAC.40.webp",
  },
  {
    id: "04",
    name: "女鞋",
    url: "https://s10.mogucdn.com/mlcdn/c45406/210218_28j7d696795ccb7llejdce9keli0c_150x150.png_640x640.v1cAC.40.webp",
  },
  {
    id: "05",
    name: "裤子",
    url: "https://s10.mogucdn.com/mlcdn/c45406/210218_16dal2iaj300ce73ada65g0514jlk_151x150.png_640x640.v1cAC.40.webp",
  },
  {
    id: "06",
    name: "美妆/护肤",
    url: "https://s10.mogucdn.com/mlcdn/c45406/210218_1ahlj8kbk6fc3gk4ch980d91f84jk_150x150.png_640x640.v1cAC.40.webp",
  },
  {
    id: "07",
    name: "裙子",
    url: "https://s10.mogucdn.com/mlcdn/c45406/200327_2lliak11gh3a6714a9k5ifi0e6b4l_135x135.jpg_640x640.v1cAC.40.webp",
  },
  {
    id: "08",
    name: "母婴/童装",
    url: "https://s10.mogucdn.com/mlcdn/c45406/210218_4jk839952i9aaac7jbh12jhgbkk88_151x150.png_640x640.v1cAC.40.webp",
  },
  {
    id: "09",
    name: "套装",
    url: "https://s10.mogucdn.com/mlcdn/c45406/210218_571djje4gf3dj24cj6c24k6gl0kcl_150x150.png_640x640.v1cAC.40.webp",
  },
  {
    id: "10",
    name: "男装女鞋",
    url: "https://s10.mogucdn.com/mlcdn/c45406/210218_5g11kl87401bf1273068k721jhe38_151x150.png_640x640.v1cAC.40.webp",
  },
];
export default {
  data() {
    return {
      active: 0,
      value: "",
      list,
      goodslist: [],
    };
  },
  methods: {
    toSearch() {
      this.$router.push("/search");
    },
    
    handleCategory(){
      this.$router.push('/category');
    }
  },
  async mounted() {
    await axios.get(
        "/mg/search?_version=8253&ratio=3%3A4&cKey=46&sort=pop&page=2&q=%25E5%25A5%25B3%25E8%25A3%2585&ptp=32._mf1_1239_4537.0.0.wlkXnByL&acm=3.mce.1_10_1u0dq.140653.0.zJD6XsFd11QUJ.pos_882-m_700059-sd_119-mf_4537_1211938-idx_0-mfs_10-dm1_5000&offset=30&_=1628160398505"
      ).then((ret) => {
        this.goodslist = ret.data.result.wall.docs;
      });
  },
};
</script>

 <style  lang="stylus" scoped>
@import '~@/assets/stylus/border.styl'
@import '~@/assets/stylus/ellipsis.styl'

html, body 
  width: 100%
  height: 100%

header
  .van-search 
    padding: 10px
    .van-icon 
      color: #9b9b9b
      font-size: 21px
    .iconleft 
      padding-right: 8px

    .iconright 
      padding: 8px 0 0 4px
main 
  width: 100%
  .classify 
    &:after 
      content: ''
      display: block
      height: 0
      clear: both;
      visibility: hidden
    

    .van-grid-item 
      margin: 4px 0

      span 
        padding-top: 4px
        font-size: 10px
        color: #666

  .list 
    width: 100%
    box-sizing border-box
    background-color: #F6F6F6
    padding 12px
    ul 
      column-count: 2
      column-gap 1
      column-width 30%
      .list-li
        box-sizing: border-box
        background-color: #fff
        border-radius: 6px
        font-size: 13px
        position: relative
        margin-bottom 10px
        .list-li-img
          border-radius: 6px 6px 0 0
        .contbo 
          padding 4px
          box-sizing border-box
            
          .title 
            ellipsis(100%, 2)
          .content-space
            display flex
            justify-content space-around
          .sale
            display: inline-block;
            line-height: 18px;
            background: #ffecef;
            border-radius: .28rem;
            font-size: .22rem;
            color: #f46;
          .play-icon 
            width: 28px
            height: 28px
            position: absolute
            top: 12px
            right: 12px


.content 
  position: relative
  &::after 
    position: absolute
    content: ''
    border-top: 1px solid #f00
    width: 200%
    height: 200%
    transform: scale(0.5)
    transform-origin: 0 0
  

</style>